<template>
  <div class="register_page">
    <CommonHeader title="注册账号" />
    <!-- 注册页主体 -->
    <div class="register_content page_no_tab_bar">
      <!-- 标题 -->
      <div class="register_title">创建个人账户</div>
      <!-- 账号 -->
      <div class="input_box">
        <div class="input_label">邮箱</div>
        <div class="input">
          <input
            type="text"
            placeholder="请输入您的邮箱"
            v-model="ruleForm.email"
          />
        </div>
        <div class="input_rule">{{ rules.email.rule }}</div>
      </div>
      <!-- 推荐码 -->
      <div class="input_box">
        <div class="input_label" @click="isShow = !isShow">
          <span>推荐码(选填)</span>
          <!-- <img  src="@/assets/login/tri_icon.png" alt="" /> -->
          <el-icon v-if="!isShow"><CaretTop /></el-icon>
          <el-icon v-else><CaretBottom /></el-icon>
        </div>
        <template v-if="isShow">
          <div class="input">
            <input
              type="text"
              placeholder="请输入推荐码"
              v-model="ruleForm.erfCode"
            />
          </div>
          <div class="input_rule"></div>
        </template>
      </div>
      <!-- 去登录 -->
      <div class="add_number to_login" @click="goLogin">已有账号？去登录</div>
      <!-- 下一步按钮 -->
      <div class="operate_btn" @click="goCode">
        <span>下一步</span>
        <p v-if="isLoading" class="rotate">
          <el-icon><Loading /></el-icon>
        </p>
      </div>
      <!-- 条款协议 -->
      <div class="agreement">
        创建账户即表示同意交易所的<span class="add_text">《服务条款》</span
        >和<span class="add_text">《隐私协议》</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { sendEmail } from "@/api/user";

// 获取路由对象
const router = useRouter();
// 可选输入框
const isShow = ref(true);
// 是否显示加载
const isLoading = ref(false);
// 表单数据
const ruleForm: any = ref({
  email: "",
  code: "",
  erfCode: "",
});
// 表单验证
const rules: any = reactive({
  email: {
    msg1: "请输入邮箱",
    msg2: "邮箱格式不正确",
    reg: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-.][a-zA-Z0-9]+)*\.[a-zA-Z]{2,6}/,
    rule: "",
  },
});

// 跳转注册页
const goLogin = () => {
  router.push("/login");
};

// 获取验证码
const goCode = () => {
  if (validateForm()) {
    isLoading.value = true;
    sendEmail({ email: ruleForm.value.email, useTo: "2" }).then((res: any) => {
      if (res.code == 200) {
        ruleForm.value.code = res.msg;
        sessionStorage.setItem("data", JSON.stringify(ruleForm.value));
        ElMessage.success("获取验证码成功，请注意您的邮箱！");
        isLoading.value = false;
        router.push("/code");
      }
    });
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg1;
      return false;
    }
    // 正则验证
    if (rules[k].reg) {
      if (!rules[k].reg.test(ruleForm.value[k])) {
        rules[k].rule = rules[k].msg2;
        return false;
      }
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};
</script>

<style lang="scss" scoped>
.register_page {
  .register_content {
    padding-top: 10px;
    .register_title {
      font-size: 22px;
      margin-bottom: 20px;
    }
    .input_box {
      // height: 108px;
      margin-bottom: 5px;
      .input_label {
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
        }
      }
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #ffffff;
        }
      }
      .input_psw {
        display: flex;
        align-items: center;
        input {
          flex: 1;
        }
        .is_open {
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
      }

      .input_rule {
        color: #e63737;
        font-size: 14px;
      }
    }
    .to_login {
      margin-top: 20px;
    }
    .operate_btn {
      margin-top: 20px;
      background: linear-gradient(to right, #14da62, #0d5eae);
      text-align: center;
      padding: 10px;
      border-radius: 10px;
    }
    .agreement {
      margin-top: 20px;
      font-size: 14px;
    }
  }
}
</style>
